/*
 * @Descripttion : 导航菜单
 * @Versions     : 0.1
 * @Author       : foxui team
 * @Date         : 2022-05-14 17:10:15
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2022-06-01 09:30:41
 */

function Menu() {
    this.CONTAINER = '.foxui-menu';
    this.MENU = '.foxui-menu-menu';
    this.HANDLE = '.foxui-menu-handle';
    this.MENU_CHILD = '.foxui-menu-child';
    this.COLLAPSE = '.foxui-menu.is-collapse';
    this.SUBMENU = '.foxui-menu-submenu';
    this.VERTICAL_HANDLE = '.foxui-menu.foxui-type-vertical:not(.is-collapse) .foxui-menu-handle';
    this.NOT_CHILD_VERTICAL_ITEM = '.foxui-menu .foxui-menu-item:not(.foxui-menu-child)';
    this.NOT_CHILD_ITEM = '.foxui-menu-item:not(.foxui-menu-child)';
    this.HORIZONTAL_SUBMENU =
        '.foxui-menu:not(.foxui-type-vertical) .foxui-menu-submenu, .foxui-menu:not(.foxui-type-vertical) .foxui-menu-child,' +
        '.foxui-menu.foxui-type-vertical.is-collapse .foxui-menu-submenu, .foxui-menu.foxui-type-vertical.is-collapse .foxui-menu-child';
    this.COLLAPSE_HANDLE = '.foxui-menu-collapse-handle';
    this.timer = null;
}

Menu.prototype._init = function () {
    this._bindToggle();
    this._bindConfirm();
    this._bindHover();
    this._bindCollapse();
};

/**
 * @description: 纵向点击切换
 * @return {*}
 * @Date: 2022-05-20 10:55:14
 */
Menu.prototype._bindToggle = function () {
    let that = this;
    $(document).on('click', this.VERTICAL_HANDLE, function () {
        let $handle = $(this),
            $menu = $handle.siblings(that.MENU),
            isActive = $handle.is('.is-active');

        if (isActive) {
            // 隐藏
            $handle.removeClass('is-active');
            $menu.slideUp('fast');
        } else {
            // 显示
            $handle.addClass('is-active');
            $menu.slideDown('fast');
        }
    });
};

/**
 * @description: 纵向移入与移出事件绑定
 * @return {*}
 * @Date: 2022-05-26 16:37:36
 */
Menu.prototype._bindHover = function () {
    let that = this;
    $(document).on('mouseover', this.HORIZONTAL_SUBMENU, function () {
        let $this = $(this),
            $handle = $this.children(that.HANDLE),
            $menu = $this.children(that.MENU),
            $parent = $this.parent(that.CONTAINER),
            isMenuChild = $this.is(that.MENU_CHILD),
            isCollapse = $parent.is(that.COLLAPSE);

        clearTimeout(this.timer);
        this.timer = null;
        this.timer = setTimeout(() => {
            $handle.addClass('is-active');
            $menu.slideDown('fast');
        }, 250);
        if (isMenuChild) {
            let $menuChild = $menu.closest(that.MENU_CHILD),
                $menuSlide = $menuChild.closest('.foxui-menu-slide'),
                width = $menuChild.width(),
                paddingLeft = parseInt($menuChild.css('padding-left')),
                paddingRight = parseInt($menuChild.css('padding-right')),
                cTop = $menuChild.offset().top,
                pTop = $menuSlide.offset().top,
                marginTop = parseInt($menuSlide.css('margin-top')),
                top = cTop - pTop + marginTop;
            $menu.css({ right: -(width + paddingLeft + paddingRight + 8) + 'px', top: top + 'px' });
        }
        if (isCollapse) {
            let left = $parent.width(),
                cTop = $parent.offset().top,
                mTop = $this.offset().top,
                top = mTop - cTop;
            $menu.css({ left: left + 8 + 'px', top: top + 'px' });
        }
    });

    $(document).on('mouseout', this.HORIZONTAL_SUBMENU, function () {
        let $this = $(this),
            $handle = $this.children(that.HANDLE),
            $menu = $this.children(that.MENU);

        clearTimeout(this.timer);
        this.timer = null;
        this.timer = setTimeout(() => {
            $handle.removeClass('is-active');
            $menu.slideUp('fast');
        }, 250);
    });
};

/**
 * @description: 纵向点击选项
 * @return {*}
 * @Date: 2022-05-26 16:37:32
 */
Menu.prototype._bindConfirm = function () {
    let that = this;
    $(document).on('click', this.NOT_CHILD_VERTICAL_ITEM, function () {
        let $this = $(this),
            isActive = $this.is('.is-active');

        if (!isActive) {
            $this.closest(that.CONTAINER).find(that.NOT_CHILD_ITEM).filter('.is-active').removeClass('is-active');
            $this.addClass('is-active');
        }
    });
};

/**
 * @description: 绑定折叠
 * @return {*}
 * @Date: 2022-05-27 10:26:12
 */
Menu.prototype._bindCollapse = function () {
    let that = this;
    $(document).on('click', this.COLLAPSE_HANDLE, function () {
        let $this = $(this),
            id = $this.attr('data-target'),
            $menu = $(`#${id}`),
            isCollapse = $menu.is('.is-collapse');

        if (isCollapse) {
            $menu.removeClass('is-collapse');
        } else {
            $menu.addClass('is-collapse');
            $menu.find(that.HANDLE).filter('.is-active').removeClass('is-active');
            $menu.find(that.MENU).css('display', 'none');
        }
    });
};

let menu = new Menu();

export { menu };
